/* 
    display: grid;         块级元素的网格布局         
    display: inline-grid;  行内元素的网格布局
    相同点：容器内元素都会进行网格布局。
    不同点：display: grid;将容器作为块级元素。display: inline-grid;将容器作为行内元素。
*/

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

.container {
  /* 定义 grid 布局 */
  display: grid;
  /* 定义 3 * 3 的网格 */
  /* grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px; */

  /* 百分比自动计算剩余宽度 */
  /* grid-template-columns: 30% auto 30%;
  grid-template-rows: 100px 100px 100px; */

  /* 两列的宽度比例 => 1:2:1 */
  /* grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 100px 100px 100px; */

  /* repeat(n,value): 重复 n 次, 每 行/列 的宽度都是value */
  grid-template-columns: 30% auto 30%;
  grid-template-rows: 100px auto 100px;

  /* 定义行列的间距 */
  grid-row-gap: 10px;
  grid-column-gap: 10px;

  width: 320px;
  height: 320px;
  border: 1px solid red;
  margin: 20px auto;
  padding: 10px;
}

.item {
  border: 1px solid skyblue;
}
